<template>
  <n-layout-sider
    collapse-mode="width"
    :collapsed-width="20"
    :width="288"
    :collapsed="systemConfig.slideCollapsed"
    show-trigger="arrow-circle"
    class="left-slider"
    content-style="height: 100%;
  display: flex;
  flex-direction: column;"
    :show-collapsed-content="false"
    :on-update:collapsed="slideCollapsedChange"
  >
    <common-title
      >页面
      <template #right>
        <div class="title_right btn" v-show="systemConfig.slideCollapsed">
          <n-icon size="20" color="#262626"> <Add></Add> </n-icon>zz
          <span>模板库</span>
        </div>
      </template>
    </common-title>
    <common-underline></common-underline>
    <page-list></page-list>
    <div style="height: 16px"></div>
    <common-title background="#FAFAFA">组件库 </common-title>
    <div style="height: 16px"></div>
    <component-search v-model="searchValue"></component-search>
    <component-list :componentList="fliterList"></component-list>
  </n-layout-sider>
</template>

<script lang="ts" setup>
  import { Add, Image } from '@vicons/ionicons5';
  import { TextT28Filled, ControlButton20Filled } from '@vicons/fluent';
  import PageList from './PageList.vue';
  import ComponentList from './ComponentList.vue';
  import ComponentSearch from './ComponentSearch.vue';
  import useSystemConfig from '@/store/system';
  import { TextFontWidgetEnum, TextAlignmentEnum, BoxDisplayEnum } from '@/utils/enum';
  const systemConfig = useSystemConfig();
  function slideCollapsedChange(collapsed: boolean) {
    systemConfig.updateSlideCollapsed(collapsed);
  }
  const componentList = reactive<ComponentItem[]>([
    {
      id: 1,
      name: '标题',
      icon: markRaw(TextT28Filled),
    },
    {
      id: 2,
      name: '图片',
      icon: markRaw(Image),
    },
    {
      id: 3,
      name: '按钮',
      icon: markRaw(ControlButton20Filled),
      info: {
        tag: 'text',
        width: 100,
        height: 100,
        boxDisplay: BoxDisplayEnum.InlineBlock,
        position: {
          x: 1,
          y: 1,
        },
        content: '',
        attr: {
          color: 'blue',
          weight: TextFontWidgetEnum.Bold,
          href: '',
          alignment: TextAlignmentEnum.Left,
        },
      },
    },
    {
      id: 4,
      name: '文本',
      icon: markRaw(TextT28Filled),
      info: {
        tag: 'text',
        width: '100%',
        height: 100,
        position: {
          x: 1,
          y: 1,
        },
        content: '',
        attr: {
          color: 'red',
          weight: TextFontWidgetEnum.Bold,
          href: '',
          alignment: TextAlignmentEnum.Left,
        },
      },
    },
  ]);
  const searchValue = ref('');
  const fliterList = computed<ComponentItem[]>(() => {
    return componentList.filter(c => c.name.includes(searchValue.value));
  });
</script>

<style scoped lang="scss">
  .title_right {
    display: flex;
    align-items: center;
    height: 100%;
    & span {
      font-size: 14px;
      color: #262626;
      margin-left: 6px;
    }
  }
</style>
